<template>
    <div>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="输出条件" prop="outputCondition">

                <el-radio-group v-model="form.outputCondition" size="small">
                    <el-radio-button label="0">同时控制</el-radio-button>
                    <el-radio-button label="1">顺序控制</el-radio-button>
                </el-radio-group>

            </el-form-item>
        </el-form>

        <el-form>

            <el-form-item>
                <el-select v-model="outputLoopSelectedList"
                           placeholder="控制点"
                           multiple
                           @remove-tag="outputRemoveLoop"
                           style="width: 100%"
                >
                    <el-option
                        v-for="item in this.loopList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        @click.native="outputLoopClick(item.value)"
                    />
                </el-select>
            </el-form-item>

        </el-form>


        <el-table :data="outputConditionList">

            <el-table-column label="名称" align="center" prop="outputEquipmentName"/>

            <el-table-column label="执行数值" align="center" prop="beginValue">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.beginValue"></el-input>
                </template>
            </el-table-column>

            <el-table-column label="完成数值" align="center" prop="endValue">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.endValue"></el-input>
                </template>
            </el-table-column>

            <el-table-column label="结束条件" align="center" prop="endCondition">

                <template slot-scope="scope">

                    <el-select v-model="scope.row.endCondition">
                        <el-option
                            v-for="item in endConditionList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>

                </template>
            </el-table-column>

            <el-table-column label="延迟时间(秒)" align="center" prop="delaySeconds">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.delaySeconds"></el-input>
                </template>
            </el-table-column>

            <el-table-column label="执行时间(分)" align="center" prop="executeTime">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.executeTime"></el-input>
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button
                        size="small"
                        type="danger"
                        @click="deleteOutputCondition(scope.row, scope.$index)"
                    >删除
                    </el-button>
                </template>
            </el-table-column>

        </el-table>
    </div>
</template>

<script>
import { listSensor } from '@/api/equipment/sensor'
import { listLoop } from '@/api/equipment/loop'

export default {
    name: 'index',
    props: {
        formOut: {
            type: Object,
            default: () => {
            }
        },
        selectSensorList: {
            type: Array,
            default: () => []
        },
        outList: {
            type: Array,
            default: () => []
        },
        selectOutputLoopList: {
            type: Array,
            default: () => []
        },
    },
    data(){
        return{
            // 表单参数
            form: this.formOut,
            // 表单校验
            rules: {},
            outputLoopSelectedList: this.selectOutputLoopList,
            outputConditionList: this.outList,
            loopList: [],
            endConditionList: [
                { value: '0', label: '输入条件不满足' },
                { value: '1', label: '自定义时间' }
            ],
        }
    },
    created() {
        this.selectSensorAndLoop()
    },
    watch: {
        form: {
            handler(newVal, oldVal) {
                let obj ={
                    form:newVal,
                    outputConditionList:this.outputConditionList,
                }
                this.$emit('updateOutForm', obj)
            },
            deep: true
        },
        outputConditionList(val){
            let obj ={
                form:this.form,
                outputConditionList:val,
            }
            this.$emit('updateOutputConditionList',obj)
        }
    },
    methods:{
        selectSensorAndLoop() {
            this.sensorList = []
            listSensor({}).then(response => {
                // console.log(response)
                for (let item of response.data) {
                    let temp = {}
                    temp['value'] = item.sensorId
                    temp['label'] = item.sensorName
                    temp['equipmentType'] = '0'
                    this.sensorList.push(temp)
                }
            })

            this.loopList = []
            listLoop({}).then(response => {
                for (let item of response.data) {
                    let temp = {}
                    temp['value'] = item.loopId
                    temp['label'] = item.loopName
                    temp['equipmentType'] = '1'
                    this.loopList.push(temp)
                }
            })
        },
        outputRemoveLoop(value) {
            let obj = this.outputConditionList.find((item) => {
                return item.outputEquipmentId === value
            })

            let index = this.outputConditionList.indexOf(obj)
            this.outputConditionList.splice(index, 1)
        },
        outputLoopClick(value) {
            let obj = this.loopList.find((item) => {
                return item.value === value
            })

            let name = obj.label

            let condition = {}
            condition = {
                'outputEquipmentId': value,
                'outputEquipmentName': name,
                'outputEquipmentType': '1',
                'beginValue': null,
                'endValue': null,
                'endCondition': null,
                'delaySeconds': null,
                'executeTime': null
            }

            let obj2 = this.outputConditionList.find((item) => {
                return item.outputEquipmentId === value
            })

            if (obj2 === undefined) {
                this.outputConditionList.push(condition)
            } else {
                let index = this.outputConditionList.indexOf(obj2)
                this.outputConditionList.splice(index, 1)
            }

        },
        deleteOutputCondition(row, index) {

            let ind = this.outputLoopSelectedList.indexOf(row.outputEquipmentId)

            this.outputLoopSelectedList.splice(ind, 1)

            this.outputConditionList.splice(index, 1)

        },
    }
}
</script>

<style scoped>

</style>
